<template>
    <div class="user-invitation">
        <div class="user-invitation-content">
            <div class="user-invitation-info">
                <p class="user-invitation-desc">
                    邀请好友加入极海地理云平台，每成功邀请5个好友，获得1个月标准版用户使用权。
                </p>
                <p>被邀请加入极海云平台并成功激活的用户，将获得1个月标准版用户使用权。</p>
                <p>您已成功邀请好友数：<span class="user-invitation-count">13</span> 继续加油哦！</p>
            </div>
            <div class="user-invitation-invite">
                <div class="user-invitation-item">
                    <p>通过邮箱邀请，输入好友电子邮箱，每个邮箱地址之间回车换行隔开</p>
                    <div class="user-invite-email">
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                        <div class="user-invite-email-button">
                            <span>发送邮件</span>
                        </div>
                    </div>
                </div>
                <div class="user-invitation-item">
                    <p>通过链接邀请，复制如下链接发给好友</p>
                    <div class="user-invite-url">
                        <input type="text" readonly>
                        <div class="user-invite-url-button">
                            <span>复制链接</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>


export default {
    name: 'user-profile',
    data () {
        return {

        }
    },
    computed: {

    },
    methods: {

    },
    components: {
    
    }
}
</script>

<style lang="scss">
@import 'common';
.user-invitation {
    .user-invitation-content {

        .user-invitation-info {
            width: 100%;
            border-bottom: 1px solid $bdGray;
            padding-bottom: 40px;
            margin-bottom: 50px;

            .user-invitation-desc {
                font-size: 22px;
                font-weight: 400;
                color: $deepGray;
                width: 540px;
                margin: 10px 0 30px;
            }

            > p {
                margin-bottom: 6px;
            }

            .user-invitation-count {
                font-weight: 600;
                color: $primary;
            }
        }

        .user-invitation-invite {
            .user-invitation-item {
                margin-bottom: 40px;

                > p {
                    margin: 20px 0;
                }
                .user-invite-email {
                    height: 80px;

                    > textarea {
                        float: left;
                        border: 1px solid $bdGray;
                        resize: none;
                        height: 100%;
                        width: 400px;
                        padding: 6px;
                    }

                    .user-invite-email-button {
                        float: left;
                        height: 100%;
                        width: 150px;
                        text-align: center;
                        line-height: 80px;
                        border: 1px solid $bdGray;
                        border-left: 0;
                        cursor: pointer;

                        &:hover {
                            color: $primary;
                        }
                    }
                }

                .user-invite-url {
                    height: 40px;

                    > input {
                        float: left;
                        border: 1px solid $bdGray;
                        resize: none;
                        height: 100%;
                        width: 400px;
                        padding: 6px;
                        line-height: 30px;
                    }

                    .user-invite-url-button {
                        float: left;
                        height: 100%;
                        width: 150px;
                        text-align: center;
                        line-height: 40px;
                        border: 1px solid $bdGray;
                        border-left: 0;
                        cursor: pointer;

                        &:hover {
                            color: $primary;
                        }
                    }
                }
            }
        }
    }
}
</style>
